<template>
    <el-dialog width="400px" class="ex-diolog" :visible.sync="visible" :close-on-click-modal="false"
        :before-close="handleClose" custom-class="no-header-dialog" destroy-on-close>
        <div class="img-body" v-if="isShow">
            <div class="img-body-title" >图片打包中。。。</div>
            <el-button type="primary" @click="cancellation">取消</el-button>
        </div>
        <div class="img-body" v-else>
            <div class="img-body-title" >{{message}}</div>
            <el-button type="primary" @click="cancellation">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {
    getToken
} from "@/utils/auth";
import axios from "axios";
let cancelToken = axios.CancelToken;
let cancel;
export default {
    props: {
        visible: Boolean,
        idList: Array
    },
    data() {
        return {
            message:'',
            isShow:true,
        };
    },
    created() {
        this.exportClick()
    },
    methods: {
        exportClick() {
            // this.exportLoading = true;
            this.isShow = true
            const API = process.env.VUE_APP_BASE_API + '/merchant/lucrative/equity/card/batch/img/download';
            var data = {
                cardIdList: this.idList
            }
            axios.post(API, data, {
                headers: {
                    "X-Access-Token": getToken()
                },
                responseType: "blob",
                cancelToken: new cancelToken(function executor(c) {
                    // executor 函数接收一个 cancel 函数作为参数
                    cancel = c;
                })
            }).then(res => {
                let data = res.data;
                let reader = new FileReader()
                reader.onload = () => {
                    let content = reader.result //响应的结果
                    try {
                        let jsonData = JSON.parse(content);
                        if (jsonData.code) {
                            this.isShow = false
                            this.message = jsonData.message
                        }
                    } catch (err) {
                        this.$message.success('打包成功！');
                        this.handleData(res);
                        setTimeout(() => {
                            this.handleClose()
                        }, 1000)
                    }

                }
                reader.readAsText(data)

            }).catch(error => {
                this.$message.error(error.message);
            })
        },
        handleData(res) {
            const blob = new Blob([res.data]);
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "图片列表.zip"; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
        },
        // 取消打包
        cancellation() {
            cancel('已取消') //取消请求
            this.handleClose()
        },
        //取消
        handleClose(formName) {
            this.$emit("update:visible", false);
        },

    }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
    ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep {
        .el-dialog__body {
            padding: 5px 30px 20px 30px;
        }

        .img-body {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .img-body-title {
            font-size: 20px;
            font-weight: bold;
            padding: 20px 0;
        }

        .el-button {
            width: 100%;
        }

        .no-header-dialog .el-dialog__header {
            display: none;
        }
    }
}
</style>
  